<template>
  <div class="box">
    <div class="article">
      <Dropdown trigger="click" @on-click='changeArticle'>
          <a href="javascript:void(0)">
              <Icon type="md-settings" />
          </a>
          <DropdownMenu slot="list">
              <DropdownItem name="edit">edit</DropdownItem>
              <DropdownItem name="delete">delete</DropdownItem>
          </DropdownMenu>
      </Dropdown>
      <h2>{{param.title}}</h2>
      <h4 class="desc">
        <span v-text="param.author"></span>
        <span v-text="param.time"></span>
      </h4>
      <div v-html="htmlContent" class="markdown"></div>
    </div>
  </div>

</template>

<script>
import BLL from './bll'
export default {
  name: 'articleDetail',
  data () {
    return {
      param: {
        title: '',
        author: '',
        content: '',
        time: ''
      }
    }
  },
  computed: {
    htmlContent () {
      return this.bll.convert(this.param.content)
    }
  },
  created () {
    let bll = this.bll = new BLL(this)
    bll.getArticle()
  },
  methods: {
    changeArticle (itemname) {
      if (itemname === 'delete') {
        this.bll.deleteArticle()
      } else if (itemname === 'edit') {
        console.log('edit selected')
      } else {
        console.warn('select wrong')
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./markdownTheme.less');
</style>
